<template>
    <div class="phoneLogin-container">
        <div class="header">
           <div @click="goHome"><van-icon size="25" name="cross" /></div>
           <div class="title">手机号登录</div>
        </div>
        <div class="login-title">
            <p>登录体验更多精彩</p>
            <p>未注册手机号登录后将激动创建账号</p>
        </div>

        <div class="input-phone">
            <div class="content">
                <span>+86</span><input v-model="phone" type="text" placeholder="请输入手机号码">
                <van-icon @click="clearInput" v-if="isInput" color="#888888" size="20" name="cross" />
            </div>

             <div class="content" style="margin-top:20px">
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><input v-model="password" type="password" placeholder="请输入密码">
                
            </div>
            <div class="login-btn">
              <div @click="phoneLogin" class="btn">登录</div>
            </div>
        </div>
        
    </div>
</template>


<script>
import {Toast} from 'vant'
export default {
    name:"phoneLogin",
    data(){
        return{
            phone:'15928076840',
            password:'1229419k'
        }
    },
    computed:{
        isInput(){
            return this.phone 
        }

    },
    methods:{
        goHome(){
            this.$router.push({path:'/home'})
        },
        clearInput(){
            this.phone = ''
        },
    //    phoneLoginFirst(){
    //         .$store.dispatch('getPhoneCode', this.phone)
    //         }
    //     }
    phoneLogin(){
        console.log(this.phone,this.password)
        let phoneReg =/^[1][3,4,5,7,8,9][0-9]{9}$/;
         if(!phoneReg.test(this.phone) || this.password === ''){
               Toast('请输入正确的手机号和密码')
            }else{
                this.$store.dispatch('phoneLogin', {phone:this.phone,password:this.password})
      }
     }
    }
}
</script>

<style scoped>
 .phoneLogin-container{
     height: 100%;
     width: 100%;
 }
 .header{
     display: flex;
     justify-content: flex-start;
     align-content: center;
     padding: 20px;
 }
 .header .title{
     margin-left: 20px;
     font-size: 16px;
     font-weight: bold;
 }
 .login-title{
     padding: 20px
 }
 .login-title p:nth-child(1){
     font-size: 16px;
     font-weight: bold;
 }
 .login-title p:nth-child(2){
     font-size: 12px;
     /* font-weight: bold; */
     color: #888888;
     margin-top: 5px;
 }
 .input-phone{
    padding: 20px;
     

 }
 .input-phone .content{
     display: flex;
     align-items: center;
     height: 40px;
     width:100%;
     border-bottom: 1px solid #eeeeee;
 }
 .input-phone span{
     font-size: 15px;

 }
 .input-phone input{
     display: block;
     border: 0;
     outline: none;
     margin-left: 5px;
     padding: 5px;
     font-size: 15px;
 }
 .input-phone input::-webkit-input-placeholder {
     color: #000000;
     font-size: 16px;
 }
 .login-btn{
     padding: 10px;
     display: flex;
     /* width: 100%; */
     justify-content: center;
     margin-top: 20px;

 }
 .login-btn .btn{
     text-align: center;
     width: 100%;
     background-color:#e70012 ;
     color: #ffffff;
     font-size: 15px;
     /* padding: 5px 10px; */
     padding: 10px;
     border-radius: 25px;

 }
 .input-phone .van-icon-cross{
     display: inline-block;
     margin-left: 70px;
 }

</style>